<template>
	<view class="invite-box">
		<view class="invite-center">
			<view class="flex justify-between align-center ww100">
				<view class="pl30">
				</view>
				<view class="flex justify-center align-center r30 h60"  style="border: 2rpx solid #000000;overflow: hidden;">
					<view class="borderBottom pl20 pr20 h60 lh60 f20 w120 text-center"
						:class="bgc == index ? 'bgcText' : ''"
						v-for="(item, index) in listTab" :key="index" @click="change(index, item.id)">
					
						{{item.name}}
					</view>
					
					
				</view>
				<view class="pr30" @click="showPropText = true">
					<image src="../../../../static/img/sear.png" class="w36 h36" mode=""></image>
				</view>
			</view>

			<view class="mt45" v-for="(item, index) in kindList" :key="index">
				<view class="pl30 pr30">
					<view class="flex align-center">
						<image :src="item.headImg" class="w90 h90 r45" mode=""></image>
						<view class="ml27">
							<view class="mb26 flex">
								{{item.nickName}}
								<view class="border-box">
									{{item.headTitle}}
								</view>

								<!-- <image :src="item.inviteImg" class="w110 h30 ml20" mode=""></image> -->
								<!-- 会员等级 -1普通用户 0 普通会员 1普通VIP 2 高级VIP 3 钻石VIP 4至尊VIP -->
								<image v-if="item.menberLabel == -1" src="../../../../static/vip/huiyuan.png" class="w110 h30 ml36" mode=""></image>
								<image v-if="item.menberLabel == 0" src="../../../../static/vip/huiyuan.png" class="w110 h30 ml36" mode=""></image>
								<image v-if="item.menberLabel == 1" src="../../../../static/vip/putong.png" class="w110 h30 ml36" mode=""></image>
								<image v-if="item.menberLabel == 2" src="../../../../static/vip/gaoji.png" class="w110 h30 ml36" mode=""></image>
								<image v-if="item.menberLabel == 3" src="../../../../static/vip/zs.png" class="w110 h30 ml36" mode=""></image>
								<image v-if="item.menberLabel == 4" src="../../../../static/vip/zhizun.png" class="w110 h30 ml36" mode=""></image>
								
								
							</view>
							<view class="f24" style="color: #666666;">
								<text>{{item.addDate}}</text>
							</view>
						</view>
					</view>
					<view class="mt30 ">
						<view class="flex">
							<image :src="item.inviteImg" class="w160 h200 r10 mr22" mode=""></image>
							<view class="ww70" @click="l.to('/pages/home/inviteInfo')">
								<view class="flex justify-between align-center">
									<view class="pad-bgc">
										{{item.theme}}
									</view>
									<view class="f24" style="color: #666666;">
										<!-- 04-09 13:00 -->
										<!-- {{item.inviteDate}} -->
										{{$u.timeFrom(item.inviteDate, false)}}
									</view>
								</view>

								<view class="mt23 f24 ">
									<view class="h110 lh41 vohed" style="
											color: #666666;">
										{{item.inviteContext}}
									</view>
									<view class="flex align-center">
										<i class="cuIcon-locationfill mr15"></i>
										<view class="mt38 mb37">{{item.inviteAddr}}</view>
									</view>
								</view>
							</view>
						</view>

						<view class="u-border-bottom borde-btn">
						</view>
						<view class="flex justify-between align-center">
							<text></text>
						</view>
					</view>
					<view class="flex h117 justify-between align-center f22" style="color: #666666;">
						<view class="">
							已成功邀约 <text class="ml10 mr10 f26" style="font-weight: 600; color: #000000;">4</text> 人
						</view>
						<view class="pad-bgc-g f24" style="color: #666666;">
							申请成功
						</view>
					</view>
				</view>

				<view class="ww100 h10" style="background-color: #F7F7F7;">

				</view>
			</view>

		</view>




		<view class="msg-box animation-slide-right f22 flex align-center justify-center" @click="l.to('/pages/home/msgList')">
			<view class="mr18">
				<image src="../../../../static/img/msg.png" class="w50 h50" mode=""></image>
				<view class="msg-init">
					1
				</view>
			</view>
			<text style="color: #40C6A8;">消息通知</text>
		</view>


		<u-popup v-model="showPropText" border-radius="30" mode="bottom">
			<view class="pt50 pl30">
				<view class="">
					<view class="flex align-center">
						<i class="cuIcon-title f40 mr21"></i>
						<text>邀约性别</text>
					</view>
					<view class="ww100 flex align-center  flex-wrap pl40">
						<view class="bgc-border" v-for="(item, index) in list" :key="index" @click="gender(index)"
							:class="black == index ? 'bgc' : ''">
							{{item.text}}
						</view>
					</view>
				</view>

				<view class="mt50 mb57">
					<view class="flex align-center">
						<i class="cuIcon-title f40 mr21"></i>
						<text>邀约主题</text>
					</view>
					<view class="ww100 flex align-center  flex-wrap pl40">
						<view class="bgc-border" v-for="(item, index) in getListFrom" :key="index" @click="tabTheme(index)"
							:class="tab == index ? 'bgc' : ''">
							{{item.theme}}
						</view>
					</view>
				</view>

				<view class="flex justify-center mb50">
					<button type="default" class="cu-btn w320 h80 r40 f30 "
						style="background-color: #000000;color: #FFFFFF;">确定</button>
				</view>
			</view>
		</u-popup>







		<view class="foot_box"></view>
		<!-- 加载提示 -->
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<!-- 信息提示-->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		props: {
			getListFrom: {
				type: Array,
				required: true
			},
			kindList: {
				type: Array,
				required: true
			}
		},
		data() {
			return {
				bgc: 0,
				showPropText: false,
				list: [{
					text: '男'
				}, {
					text: '女'
				}, {
					text: '不限'
				}],
				listFrom: [{
					text: '男'
				}, {
					text: '女'
				}, {
					text: '不限'
				}, {
					text: '约饭'
				}, {
					text: '演出展览'
				}],
				black: 0,
				tab: 0,
				listTab:[{
					name: '普通',
					id: 1
				},{
					name: '急约',
					id: 2
				}],
			};
		},
		onShow() {},
		onLoad(e) {},
		methods: {
			cutBgc(index) {
				this.bgc = index
			},

			gender(index) {
				this.black = index
			},
			
			tabTheme(index) {
				this.tab = index
			},
			
			change(index, id) {
				this.bgc = index;
				this.$emit('classInit', id)
			}
		}
	};
</script>

<style lang="scss" scoped>
	.invite-box {
		
		.vohed {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			overflow: hidden;
		}

		.invite-center {
			// padding: 30rpx;
			
			
			.bgcText {
				color: #FFFFFF;
				background-color: #000000;
			}	

			.bgc-left {
				width: 236rpx;
				height: 60rpx;
			}

			.border-box {
				padding: 5rpx 11rpx;
				font-size: 20rpx;
				border-radius: 20rpx;
				margin-left: 24rpx;
				color: #40C6A8;
				border: 1rpx solid #40C6A8;
			}

			.pad-bgc {
				padding: 15rpx 21rpx;
				border-radius: 6rpx;
				color: #2984F5;
				font-size: 24rpx;
				background-color: #F2F6FF;
			}

			.borde-btn {
				width: 100%;
				border-bottom: 1rpx solid #F0F0F0;
			}

			.pad-bgc-g {
				padding: 14rpx 19rpx;
				background-color: #F5F5F5;
				border-radius: 25rpx;
			}

		}

		.msg-box {
			position: fixed;
			right: 0;
			width: 202rpx;
			height: 80rpx;
			top: 70%;
			border-radius: 40rpx 0 0 40rpx;
			background: #FFFDFE;
			box-shadow: 0px 2rpx 20rpx 0px rgba(64, 198, 168, 0.2);

			view {
				position: relative;
			}

			.msg-init {
				position: absolute;
				right: -5rpx;
				top: -5rpx;
				width: 24rpx;
				height: 24rpx;
				border-radius: 12rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 24rpx;
				background-color: #FE1111;
			}
		}

		.bgc-border {
			padding: 19rpx 47rpx;
			border: 2rpx solid #F0F0F0;
			border-radius: 40rpx;
			margin-right: 30rpx;
			margin-top: 30rpx;
			font-size: 26rpx;
			color: #666666;
		}

		.bgc {
			color: #FFFFFF;
			background-color: #000000;
		}
	}
</style>
